import { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Links } from '@/components/web-react'
import { IconCaretRight } from '@arco-design/web-react/icon'

interface IProps {
  children?: ReactNode
}

const RuomWalk: FC<IProps> = () => {
  const options = [
    {
      label: '北京',
      value: 'beijing'
    },
    {
      label: '上海',
      value: 'shanghai'
    },
    {
      label: '广州',
      value: 'guangzhou'
    },
    {
      label: '深圳',
      value:'shenzhen'
    },
    {
      label: '杭州',
      value: 'hangzhou'
    }
  ]
  const TypeList1 = [
    {
      id: 1,
      label: '流行',
      value: 'popular',
      imgUrl: 'https://picsum.photos/200'
    },
    {
      id: 2,
      label: '摇滚',
      value: 'rock',
      imgUrl: 'https://picsum.photos/200'
    },
    {
      id: 3,
      label: '古典',
      value: 'classical',
      imgUrl: 'https://picsum.photos/200'
    },
  ]
  const TypeList2 = [
    {
      id: 1,
      label: '华语',
      value: 'popular',
      imgUrl: 'https://picsum.photos/200'
    },
    {
      id: 2,
      label: '欧美',
      value: 'rock',
      imgUrl: 'https://picsum.photos/200'
    },
    {
      id: 3,
      label: '日韩',
      value: 'classical',
      imgUrl: 'https://picsum.photos/200'
    },
  ]
  const [currentType, setCurrentType] = useState<any>([])
  const [value, setValue] = useState('beijing')
  useEffect(() => {
    switch (value) {
      case 'beijing':
        setCurrentType(TypeList1)
        break;
      case'shanghai':
        setCurrentType(TypeList2)
        break;

      default:
        break;
    }
  }, [value])

  return (
    <div className={"select-none"}>
      <h2 className="text-2xl font-bold text-gray-600 mb-4">Ruom 漫步</h2>
      <p className={"text-xl"}>请选择一个你喜欢的音乐City，或者<span className={"text-primary-600 cursor-pointer"}>随缘...</span></p>
      <Links options={options} defaultValue='beijing' onSelect={(value) => setValue(value)}></Links>
      <div className={"flex gap-4"}>
        {currentType.map((item: any) => (
          <div key={item.id} className={"flex flex-col justify-center items-center p-2"}>
            <div className={"relative w-24 h-24 rounded-full"}>
              <img src={item.imgUrl} alt={item.label} className={"w-full h-full rounded-full cursor-pointer outline outline-4 outline-primary-600"} />
              <div className={"cursor-pointer flex justify-center items-center absolute z-10 top-0 left-0 w-full h-full opacity-0 bg-black rounded-full hover:opacity-50 transition"}>
                {/* 播放图标 */}
                <IconCaretRight  style={{ fontSize: '30px', color: '#fff'}} />
              </div>
            </div>
            <span className={"text-lg mt-2"}>{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

export default memo(RuomWalk)
